<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>登录弹窗</title>
	<style>
		body {
			margin:0;
			padding:0;
			font-size:12px;
			color:#333;
			background: rgba(0,0,0,0.3);
		}
		#login {
			width:350px;
			height:250px;
			border:1px solid #ccc;
			position:absolute;
			z-index:9999;
			background:#fff;
		}
		#login h2 {
			height:40px;
			line-height:40px;
			text-align:center;
			font-size:14px;
			letter-spacing:1px;
			color:#666;
			background:#90adb2;
			margin:0;
			padding:0;
			border-bottom:1px solid #ccc;
			margin:0 0 20px 0;
			cursor:move;
		}
		#login div.user, #login div.pass {
			font-size:14px;
			color:#666;
			padding:5px 0;
			text-align:center;
		}
		#login input.text {
			width:200px;
			height:25px;
			border:1px solid #ccc;
			background:#fff;
			font-size:14px;
		}
		#login .button {
			text-align:center;
			padding:20px 0;
		}
		#login input.submit {
			width:107px;
			height:30px;
			background:#8aed7b;
			border:none;
			cursor:pointer;
		}
		#login .other {
			text-align:right;
			padding:15px 10px;
			color:#666;
		}
	</style>
</head>
<body>
	<div id="login">
		<h2>网站登录</h2>
		<div class="user">帐号：<input type="text" name="user" class="text" /></div>
		<div class="pass">密码：<input type="password" name="pass" class="text" /></div>
		<div class="button"><input type="button" class="submit" value="登录" /></div>
		<div class="other">注册新用户|忘记密码？</div>
	</div>

	<script>
	var login = document.getElementById("login");
	login.onmousedown = function(e) {
		var _this = this;
		var diffX = e.clientX - _this.offsetLeft;
		var diffY = e.clientY - _this.offsetTop;
		document.onmousemove = function (e) {
			_this.style.left = e.clientX - diffX + 'px';
			_this.style.top = e.clientY - diffY + 'px';
		} 
		document.onmouseup = function () {
			this.onmousemove = null;
			this.onmouseup = null;
		}
	}
	</script>
</body>
</html>